<template>
	<view class="content commonPop">
		<u-popup :show="isAdd" mode="bottom">
			<view class="purchaseBox">
				<view class="baseTop">
					<text>签到迟到说明</text>
					<view class="closeBox" @click="isAdd = false">
						<image src="../static/closeBtn.png" mode=""></image>
					</view>
				</view>
				
				<view class="inputBox">
					<view class="inputTitle">
						迟到说明：
					</view>
					<textarea name="" v-model="signForm.lateReason" id="" cols="30" rows="10"></textarea>
				</view>
				
				<view class="photoBox">
					<text>拍照说明：</text>
					<view class="upladInfo">
						<u-upload
							style="width:144rpx;height:144rpx;border-radius:12rpx;"
						   :fileList="fileList"
						   @afterRead="afterRead"
						   @delete="deletePic"
						   name="1"
						   multiple
						   :maxCount="10"
						 ></u-upload>
					</view>
				</view>
				
				<view class="xunBottomBox">
					<text class="btn1" @click="isAdd = false">取消</text>
					<text class="btn2" @click="submitSign">确定</text>
				</view>	
				
			</view>
		</u-popup>	
	</view>
</template>

<script>
	import baseUrl  from '@/util/config.js';
	export default {
		name:"reasonBox",
		data() {
			return {
				isAdd: false,
				signForm:{
					lateReason: '',
					latePhotos: ''
				},
				fileList: []
			};
		},
		methods:{
			submitSign(){
				if(this.signForm.lateReason == '') {
					return uni.$u.toast('请输入迟到说明!');
				}
				if(this.fileList.length > 0) {
					let urlArr = [];
					this.fileList.forEach(item=>{
						urlArr.push(item.url);
					});
					this.signForm.latePhotos = urlArr.toString();
				} else {
					this.signForm.latePhotos = '';
				}
				this.isAdd = false;
				this.$emit('showBtt',this.signForm);
			},
			showInfo(){
				this.signForm = {
					lateReason: '',
					latePhotos: ''
				};
				this.isAdd = true;
			},
			afterRead(event) {
				console.log(event);
				let wenList = event.file;
				wenList.forEach(item=>{
					uni.uploadFile({
						url: baseUrl.baseUrl + '/common/upload',
						filePath: item.url,
						name: 'file',
						header: {
							Authorization: 'Bearer ' + uni.getStorageSync('userToken')
						},
						formData: {
							frontFileType: 'picture'
						},
						success: res => {
							var jsurl = JSON.parse(res.data)
							if (jsurl.code != 200) {
								return uni.$u.toast(jsurl.msg);
							}
							let objj = {
								url: jsurl.url
							};
							this.fileList.push(objj);
						}
					});
				})
			},
			deletePic(val){
				console.log(val);
				this.fileList.splice(val.index,1);
			},
		}
	}
</script>

<style lang="scss" scoped>
.content{
		.purchaseBox{
			background: #F5F5F5;border-radius: 32rpx 32rpx 0px 0px;padding:0 24rpx 192rpx;
			.baseTop{
				text-align: center;@include flx;justify-content: center;
				text{
					display: block;@include baseFont(36rpx,#333,108rpx);font-weight: 500;
				}
				.closeBox{
					position: absolute;right:38rpx;top:52rpx;
					image{
						display: block;width:24rpx;height:24rpx;
					}
				}
			}
			.xunBottomBox{
				height: 180rpx;background: #FFFFFF;@include flx;justify-content: space-between;position: fixed;bottom:0;left:0;
				box-shadow: 0px -4rpx 16rpx 0px rgba(0,0,0,0.04), 0px 0px 24rpx -8rpx rgba(0,0,0,0.03);width:100%;z-index:999;
				text{
					display: block;width: 336rpx;height: 80rpx;background: #EFEFF1;text-align: center;
					border-radius: 40rpx;@include baseFont(30rpx,#17181B,80rpx);margin-top:18rpx;
				}
				.btn1{
					margin-left:24rpx;
				}
				.btn2{
					margin-right:24rpx;background: linear-gradient( 90deg, #588FFF 0%, #3671E9 100%);color:#fff;font-weight:500;
				}
			}
			.photoBox{
				background-color:#fff;border-radius:8rpx;padding:32rpx;margin-top:16rpx;
				text{
					@include baseFont(30rpx,#262626,42rpx);margin-bottom:20rpx;display: block;
				}
			}
			.inputBox{
				background-color:#fff;border-radius:8rpx;padding:32rpx;
				.inputTitle{
					@include baseFont(30rpx,#262626,42rpx);margin-bottom:20rpx;
				}
				textarea{
					display: block;height: 186rpx;background: #F6F6F6;border-radius: 8rpx;@include baseFont(28rpx,#262626,40rpx);
					padding:20rpx;width:calc(100% - 40rpx);
				}
			}
		}
	}		
</style>